<template>
  <div class="ddetails">
    <!-- 头部 开始 -->
    <div class="top">
      <back></back>
      <span>商品详情</span>
      <div class="share">
        <img src="../assets/fen.png" />
        <van-cell @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          :options="options"
          @select="onSelect"
        />
      </div>
    </div>
    <!-- 头部 结束 -->
    <!-- 轮播图 开始 -->
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 结束 -->
    <!-- 详情 开始 -->
    <div class="main">
      <!-- 名称 -->
      <div class="title">
        <p>儿童干湿分离包游泳健身包防水沙滩旅行双肩背包</p>
        <div class="Price">
          <span>179</span>
          <s>204</s>
        </div>
        <span>多仓收纳，干湿分离，游泳健身外出旅行，一包搞定</span>
      </div>
      <!-- 规格-->
      <div class="sort">
        <div class="item">
          <span>规格</span>
          <span>颜色分类</span>
          <span>&gt;</span>
        </div>
        <div class="item">
          <span>服务</span>
          <span>7天无理由退货·品质保证</span>
          <span>&gt;</span>
        </div>
      </div>
    </div>
    <!-- 详情图 -->
    <div class="image">
      <img src="../assets/ddetails/d6.jpg" />
      <img src="../assets/ddetails/d7.jpg" />
      <img src="../assets/ddetails/d8.jpg" />
      <img src="../assets/ddetails/d9.jpg" />
      <img src="../assets/ddetails/d10.jpg" />
      <img src="../assets/ddetails/d11.jpg" />
      <img src="../assets/ddetails/d12.jpg" />
      <img src="../assets/ddetails/d13.jpg" />
      <img src="../assets/ddetails/d14.jpg" />
      <img src="../assets/ddetails/d15.jpg" />
      <img src="../assets/ddetails/d16.jpg" />
      <img src="../assets/ddetails/d17.jpg" />
      <img src="../assets/ddetails/d18.jpg" />
    </div>
    <!-- 详情 结束 -->
    <!-- 按钮 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 颜色分类

      // 评价
      value: 5,
      // 轮播
      images: [
        require("../assets/ddetails/d1.jpg"),
        require("../assets/ddetails/d2.jpg"),
        require("../assets/ddetails/d3.jpg"),
        require("../assets/ddetails/d4.jpg"),
        require("../assets/ddetails/d5.jpg"),
      ],
      // 分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    // 购买
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>
<style>
.ddetails {
  padding-top: 70px;
}
/* 头部 */
.ddetails .top {
  width: 100%;
  height: 60px;
  position: fixed;
  font-size: 18px;
  font-weight: 600;
  top: 0;
  text-align: center;
  background-color: #fdfdfd;
  border-bottom: 1px solid #eee;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ddetails .top > span {
  width: 200px;
  text-align: left;
}
.ddetails .share {
  width: 60px;
  height: 60px;
  position: relative;
}
.ddetails .share > img {
  width: 30px;
  display: block;
  position: absolute;
  right: 20%;
  top: 30%;
  z-index: -10;
}
.ddetails .van-cell {
  content: "";
  width: 60px;
  height: 60px;
  background: transparent;
}
/* 轮播图 */
.ddetails .swipe {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
}
.ddetails .swipe img {
  width: 100%;
  border-radius: 10px;
}
/* 详情开始 */
.ddetails .main {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
}
.ddetails .title {
  text-align: left;
  padding: 20px 0;
  line-height: 24px;
  border-bottom: 10px solid #eee;
}
.ddetails .Price > span {
  font-size: 22px;
  color: #dc3545;
}
.ddetails .Price > span::before {
  content: "￥";
  font-size: 16px;
}
.ddetails .Price > s {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}
.ddetails .Price > s::before {
  content: "￥";
  font-size: 14px;
}
.ddetails .title > p {
  font-size: 18px;
  margin-bottom: 10px;
}
/* 规格 */
.ddetails .sort {
  text-align: left;
  padding: 10px 0;
  line-height: 22px;
  border-bottom: 10px solid #eee;
  margin-bottom: 20px;
}
.ddetails .sort > :first-child {
  border-bottom: 1px solid #ddd;
}
.ddetails .item {
  margin: 0 auto;
  width: 97%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.ddetails .item > :nth-child(2) {
  width: 70%;
}
.ddetails .item > :last-child {
  font-size: 16px;
  font-family: "宋体";
  font-weight: 700;
}
.ddetails .image {
  width: 100%;
}
.ddetails .image > img {
  width: 100%;
  display: block;
}
</style>